<template>
  <view class="content">
    <!-- 头部背景区域开始 -->
    <view class="title_bg">
      <view class="title_bg_content justify-content_center">
        <!-- 搜索框 -->
        <view class="search justify-content_center">
          <span>搜索</span>
        </view>
        <!-- 分类图标 -->
        <view class="classify justify-content_between">
          <view class="classify_icon justify-content_between">
            <image src="../../static/qiandao.png" mode=""></image>
            <text>签到</text>
          </view>
          <view class="classify_icon justify-content_between">
            <image src="../../static/baike.png" mode=""></image>
            <text>百科</text>
          </view>
          <view class="classify_icon justify-content_between">
            <image src="../../static/huodong.png" mode=""></image>
            <text>活动</text>
          </view>
          <view class="classify_icon justify-content_between">
            <image src="../../static/kefu.png" mode=""></image>
            <text>客服</text>
          </view>
          <view class="classify_icon justify-content_between">
            <image src="../../static/libao.png" mode=""></image>
            <text>礼包</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 头部背景区域开始 -->

    <!-- 主体区域开始 -->
    <div class="subject">
      <!-- 主播推荐 -->
      <div class="recommend padding ">
        <!-- 主播推荐头部 -->
        <div class="recommend_title justify-content_between">
          <div class="recommend_title_left justify-content_center">
            <image src="../../static/tuijian.png" mode=""></image>
            <text>主播推荐</text>
          </div>
          <div class="recommend_title_right justify-content_center">
            <text>全部</text>
            <image src="../../static/icon_grzx.png" mode=""></image>
          </div>
        </div>
      </div>
      <!-- 主播推荐内容 -->
      <div class="recommend_content ">
        <div class="recommend_content_item padding justify-content_between">
          <!-- 内容 -->
          <div class="zhubo justify-content_center">
            <!-- 主播头像 -->
            <div class="portrait">
              <image src="../../static/touxiang.png" mode=""></image>
            </div>
            <!--  主播信息 -->
            <div class="message justify-content_between">
              <div class="message_one">
                <text>昵称不超过八个字</text>
                <image src="../../static/nv.png" mode=""></image>
                <image src="" mode=""></image>
              </div>
              <div class="message_two">
                <div>
                  <text>地址</text>
                </div>
                <div>
                  <text> 123万</text>
                </div>
              </div>
              <div class="message_tree">这个人很懒,什么也没留下</div>
            </div>
          </div>
          <!-- 关注 -->
          <div class="guanzhu">
            <image src="../../static/guanzhu.png" mode=""></image>
          </div>
        </div>
      </div>
    </div>
    <!-- 订阅 -->
    <div>2</div>


    </div>
    <!-- 主体区域结束 -->

  </view>
</template>

<script>
  export default {
    data() {
      return {}
    },
    onLoad() {

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  page {
    font-size: 14rpx;
  }



  .title_bg {
    height: 472rpx;
    background: url(../../static/bg.png)no-repeat;
    background-size: cover;

    .title_bg_content {
      height: 100%;
      flex-direction: column;
    }

    // 搜索
    .search {
      width: 95%;
      height: 70rpx;
      background-color: #fff;
      border-radius: 30rpx;
      color: #ccc;
    }

    .classify {
      width: 100%;
      margin-top: 40rpx;
    }

    .classify_icon {
      flex: 1;
      flex-direction: column;
      height: 120rpx;
      color: #fff;
    }

    .classify_icon image {
      width: 74rpx;
      height: 74rpx;
    }
  }

  // 主体区域开始
  .subject {
    position: absolute;
    top: 372rpx;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;

    // 主播推荐
    .recommend {

      .recommend_title {
        width: 100%;
        height: 100rpx;

      }

      .recommend_title_left image {
        width: 46rpx;
        height: 46rpx;
        margin-right: 10rpx;
      }

      .recommend_title_left text {
        font-size: 28rpx;
        font-weight: 700;
        color: #343434;
      }

      .recommend_title_right {
        color: #949595;
      }

      .recommend_title_right image {
        width: 26rpx;
        height: 26rpx;
        margin-left: 10rpx;
      }
    }

    .recommend_content {
      width: 100%;

      .recommend_content_item {
        height: 182rpx;
        border: 1px solid #000;

        // 内容
        .zhubo {
          height: 145rpx;

          .portrait {
            width: 145rpx;
            height: 145rpx;
            border-radius: 50%;
            margin-right: 20rpx;
          }

          .message {
            height: 100%;
            flex-direction: column;
            .message_one{}
            .message_two{}
            .message_tree{}
          }

        }

        // 关注
        .guanzhu {
          width: 46rpx;
          height: 48rpx;
        }
      }
    }
  }

  // 主体区域结束
</style>
